import {
	browserLogs,
	findAssetFile,
	getColor,
	getEl,
	getText,
	IS_SVELTE_BASELINE,
	isBuild
} from '~utils';
import { expect } from 'vitest';

// support for treeshaking css was added after 5.0.0
describe.skipIf(IS_SVELTE_BASELINE)('css-treeshake', () => {
	test('should not have failed requests', async () => {
		browserLogs.forEach((msg) => {
			expect(msg).not.toMatch('404');
		});
	});

	test('should apply css from used components', async () => {
		expect(await getText('#app')).toBe('App');
		expect(await getColor('#app')).toBe('blue');
		expect(await getText('#a')).toBe('A');
		expect(await getColor('#a')).toBe('red');
	});

	test('should apply css from unused components that contain global styles', async () => {
		expect(await getEl('head style[src]'));
		expect(await getColor('#test')).toBe('green'); // from B.svelte
	});

	test('should not render unused components', async () => {
		expect(await getEl('#b')).toBeNull();
		expect(await getEl('#c')).toBeNull();
	});

	if (isBuild) {
		test('should include unscoped global styles from unused components', async () => {
			const cssOutput = findAssetFile(/index-.*\.css/);
			expect(cssOutput).toContain('#test{color:green}'); // from B.svelte
		});
		test('should not include scoped styles from unused components', async () => {
			const cssOutput = findAssetFile(/index-.*\.css/);
			// from C.svelte
			expect(cssOutput).not.toContain('.unused');
		});
	}
});
